<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="${_response_encoding}">
    <script src="@{'/public/javascripts/graphx/geometry/Point.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Line.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Polyline.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Polygon.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Rectangle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Ellipse.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/geometry/Circle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/custom/Path.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/polygon/Triangle.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/graphx/Drawer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <style>
        html, body{
            width:100%;
            height:100%;
            padding:0;
            margin:0;
        }
        svg{
            width:100%;
            height:100%;
            background:transparent url('@{'/public/images/grid.gif'}');
        }
    </style>
    <script type="text/javascript">


        function test(){
            var drawer = new Drawer(document.getElementById("workspace"));
            drawer.clearAll();
            drawer.removeAllObjects();
            var r1Origin = new Point(100,20);
            var r2Origin = new Point(500,200);
            var r3Origin = new Point(500,20);
            var r4Origin = new Point(700,200);
            var r5Origin = new Point(950,200);

            var rectangle1 = new Rectangle(r1Origin, 100, 100);
            var rectangle2 = new Rectangle(r2Origin, 100, 100);
            var rectangle3 = new Rectangle(r3Origin, 100, 100);

            drawer.addObject(rectangle1,{"fill":"blue"});
            drawer.addObject(rectangle2);
            drawer.addObject(rectangle3);

            var circle1 = new Ellipse(r4Origin, 50, 50);
            drawer.addObject(circle1);

            var ellipse1 = new Ellipse(r5Origin, 50, 100);
            drawer.addObject(ellipse1);

            var i1 = rectangle1.getIntersectionFromCenterToPoint(rectangle2.center);
            var i2 = rectangle2.getIntersectionFromCenterToPoint(rectangle1.center);
            var i3 = rectangle2.getIntersectionFromCenterToPoint(rectangle3.center);
            var i4 = rectangle3.getIntersectionFromCenterToPoint(rectangle2.center);
            var i5 = ellipse1.getIntersectionFromCenterToPoint(rectangle3.center);
            var i6 = rectangle3.getIntersectionFromCenterToPoint(ellipse1.origin);

            var i7 = ellipse1.getIntersectionFromCenterToPoint(circle1.origin);
            var i8 = circle1.getIntersectionFromCenterToPoint(ellipse1.origin);

            drawer.addObject(i1);
            drawer.addObject(i2);
            drawer.addObject(i3);
            drawer.addObject(i4);
            drawer.addObject(i5);
            drawer.addObject(i6);
            drawer.addObject(i7);
            drawer.addObject(i8);
            var connector1 = new Line(i1, i2);
            var connector2 = new Line(i3, i4);
            var connector3 = new Line(i5, i6);
            var connector4 = new Line(i7, i8);
            drawer.addObject(connector1,{"stroke":"red"});
            drawer.addObject(connector2);
            drawer.addObject(connector3);
            drawer.setObjectAttribute(connector3,"stroke-dasharray","10,2");
            drawer.addObject(connector4,{"stroke":"yellow"});
            drawer.setObjectAttribute(connector2, "stroke", "green");
            drawer.setObjectAttributes(rectangle3, {"stroke":"green","fill":"white","onclick":"alert('test');"});
            drawer.setObjectAttributes(circle1, {"stroke":"green","fill":"red"});

            drawer.draw();
        }

        function test2(){
            var drawer = new Drawer(document.getElementById("workspace"));
            drawer.removeAllObjects();
            drawer.clearAll();
            var origin = new Point(200,200);

            var triangle = new Triangle(origin);


            var triangle2= new Triangle(origin);
            triangle2.rotate(-60);
            var triangle3= new Triangle(origin);
            triangle3.rotate(-120);
            drawer.addObject(triangle);
            drawer.addObject(triangle2);
            drawer.addObject(triangle3);
            drawer.addObject(origin);
            drawer.draw();
        }
    </script>
</head>
<body>
    <button onclick="test();">Test</button>
    <button onclick="test2();">Test</button>
    <svg id="workspace" xmlns="http://www.w3.org/2000/svg" ></svg>
</body>
</html>